<template>
  <div class="topCon">
    <el-row>
      <el-col class="topTitle" :class="{ noExplain: !titleExplain }">
        <h2>
          {{ titleText }}
        </h2>
        <p v-show="titleExplain">{{ titleExplain }}</p>
        <span v-if="dateStr" class="dateShow">更新时间：{{ dateStr }}</span>
        <el-button
          type="primary"
          plain
          class="btn"
          @click="skip"
          v-if="btnText && isShowBtn"
        >
          {{ btnText }}
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  //搜索条件
  props: [
    'titleText',
    'titleExplain',
    'dateStr',
    'pathUrl',
    'btnText',
    'isShowBtn',
    'oldUrl',
  ],

  methods: {
    skip() {
      this.$router.push(this.pathUrl)
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: this.oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>
<style scoped lang="less">
.topTitle {
  background: #e4ebf1;
  // height: 93px;
  padding: 15px 24px;
  position: relative;
  h2 {
    font: bold 18px Microsoft YaHei;
    color: #333333;
  }
  p {
    font-size: 14px;
    margin-top: 10px;
    color: #666666;
  }
  .btn {
    position: absolute;
    top: 26px;
    right: 24px;
    width: 136px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #009588;
    border-radius: 21px;
    font-size: 14px;
    color: #009588;
    text-align: center;
    background: #e4ebf1;
    padding: 0;
  }
  .btn:hover {
    background: rgba(0, 149, 136, 0.1);
  }
  .dateShow {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 240px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #009588;
    text-align: center;
    padding: 0;
  }
}

.noExplain {
  padding: 0;
  padding-left: 24px;
  height: 67px;
  line-height: 67px;
  h2 {
    line-height: 1;
    height: 67px;
    line-height: 67px;
  }
  .btn {
    top: 16px;
  }
}

.topCon {
  margin: 24px;
}
</style>
